import React from "react"
import qs from 'query-string'
import { getsong, submit } from './api'
import './detailsong.css'
import { pinglun } from './api'
class Song extends React.Component {
    constructor() {
        super()
        this.state = {
            url: "",
            name: "",
            arr: [],
            msg: "",
            show: "none",
            haha:""
        }
    }
    componentDidMount() {
        // console.log(this.props);

        let id = qs.parse(this.props.location.search).id
        // console.log(id,'iiiiiiiiiiiiiiiiiii');
        
        let ss = qs.parse(this.props.location.search).name
        getsong(id).then(res => {
            this.setState({
                //音乐的URL
                url: res.data[0].url,
                name: ss
            })
        })
        pinglun(id).then(res => {
            // console.log(res.comments, 'ssssssssssssss');
            this.setState({
                arr: res.comments
            })
        })
    }
    back() {
        this.props.history.go(-1);
    }
    mei() {
        this.setState({
            show:"none"
        })
    }
    render() {
        return (
            <div id="songs">
                <h4 onClick={this.back.bind(this)}>
                    <img src={require('../../imgs/back.png')} alt="" />
                    <span>返回</span>
                </h4>
                <img src={require('../../imgs/zhuan.jpg')} className={this.state.haha} />
                <h3>{this.state.name}</h3>
                <audio src={this.state.url} controls onPlay={this.zhuan.bind(this)
                } onPause={this.ting.bind(this)} controlsList="nodownload"></audio>
                <h2>
                    <img src={require('../../imgs/评论.png')} onClick={this.one.bind(this)} alt="" />
                    <img src={require('../../imgs/下载.png')} onClick={this.two.bind(this)} alt="" />
                    <img src={require('../../imgs/分享.png')} onClick={this.three.bind(this)} alt="" />
                </h2>
                <div id="show" style={{ display: this.state.show }}>
                    <p>热评榜
                        <img src={require('../../imgs/hot.gif')} alt="" />
                    </p>
                    <h6 id="san">
                        <img src={require('../../imgs/bo.png')} onClick={this.mei.bind(this)} alt="" />
                    </h6>
                    <ul>
                        {this.state.arr.map((item, index) => {
                            return (
                                <li key={index}>
                                    <h3>
                                        <img src={item.user.avatarUrl} alt="" />
                                    </h3>
                                    <p>
                                        <span> <i>昵称:</i> {item.user.nickname}</span>
                                        <b>
                                            <i>评论:</i>
                                            {item.content}</b>
                                    </p>
                                </li>
                            )
                        })}
                    </ul>
                    <div id="submit">
                        <input type="text" onChange={this.tong.bind(this)} placeholder="点击评论" value={this.state.msg} />
                        <button onClick={this.jiao.bind(this)}>提交</button>
                    </div>
                </div>
            </div>
        )
    }
    tong(e) {
        this.setState({
            msg: e.target.value
        })
    }
    jiao() {
        let id = qs.parse(this.props.location.search).id
        // console.log(this.state.msg, '=======================');
        submit(id, this.state.msg)
    }

    one() {
        this.setState({
            show: "block"
        })
    }
    two() {

    }
    three() {

    }
    zhuan() {
        console.log('执行了');
        this.setState({
            haha: "running"
        })
    }
    ting() {
        this.setState({
            haha: ""
        })
    }

}

export default Song